<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_1786038_m62pqneyrzf.css">
		<title>注册界面</title>
		
		<style type="text/css">
		 
		 * {
            margin: 0;
            padding: 0;
		   }
    
		    html {
				height: 100%;
            }
        
            body {/*背景图片*/
				height: 100%;
                font-family: JetBrains Mono Medium;
                display: flex;
                align-items: center;
                justify-content: center;
                /* background-color: #0e92b3; */
                background: url('./bg.jpg') no-repeat;
                background-size: 100% 100%;
			    transition: opacity 0.5s;
            }
			
          
			.form-wrapper {
            width: 300px;
            background-color: rgba(41, 45, 62, .8);
            color: #fff;
            border-radius: 2px;
            padding: 50px;
        }
        
        .form-wrapper .header {
            text-align: center;
            font-size: 35px;
            text-transform: uppercase;
            line-height: 100px;
        }
        
        .form-wrapper .input-wrapper input {
            background-color: rgb(41, 45, 62);
            border: 0;
            width: 100%;
            text-align: center;
            font-size: 15px;
            color: #fff;
            outline: none;
        }
        
        .form-wrapper .input-wrapper input::placeholder {
            text-transform: uppercase;
        }
        
        .form-wrapper .input-wrapper .border-wrapper {
            background-image: linear-gradient(to right, #e8198b, #0eb4dd);
            width: 100%;
            height: 50px;
            margin-bottom: 20px;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .form-wrapper .input-wrapper .border-wrapper .border-item {
            height: calc(100% - 4px);
            width: calc(100% - 4px);
            border-radius: 30px;
        }
        
        .form-wrapper .action {
            display: flex;
            justify-content: center;
        }
        
        .form-wrapper .action .btn {
            width: 60%;
            text-transform: uppercase;
            border: 2px solid #0e92b3;
            text-align: center;
            line-height: 50px;
            border-radius: 30px;
            cursor: pointer;
        }
        
        .form-wrapper .action .btn:hover {
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }
        
        .form-wrapper .icon-wrapper {
            text-align: center;
            width: 60%;
            margin: 0 auto;
            margin-top: 20px;
            border-top: 1px dashed rgb(146, 146, 146);
            padding: 20px;
        }
        
        .form-wrapper .icon-wrapper i {
            font-size: 20px;
            color: rgb(187, 187, 187);
            cursor: pointer;
            border: 1px solid #fff;
            padding: 5px;
            border-radius: 20px;
        }
        
        .form-wrapper .icon-wrapper i:hover {
            background-color: #0e92b3;
        }
			
		</style>
	</head>

        <div class="form-wrapper" id="mySignup" method="post">
            <div class="header">
                全球粮食贸易地理信息系统注册
            </div>
            <div class="input-wrapper">
                <div class="border-wrapper">
                    <input type="text" name="username" placeholder="输入英文名字" class="border-item" autocomplete="off">
                </div>
                <div class="border-wrapper">
                    <input type="password" name="password" placeholder="不少于4位的数字和字母" class="border-item" autocomplete="off">
                </div>
            </div>
            <div class="action">
                <div>
                    <button type="button" onclick="fun03()">提交</button>
				    <button type="reset">清除</button>
                </div>
            </div>
            <div class="icon-wrapper">
                <i class="iconfont icon-weixin"></i>
                <i class="iconfont icon-qq"></i>
                <i class="iconfont icon-git"></i>
            </div>
        </div>
		
	
	<script>
	    //登陆
	    function fun03() {
			//拿到输入框的值
	       var f1=userName.value;
		   var f2=userPwd.value;
		   //正则
		   var rexName=/^[a-zA-Z]{1,15}$/;
		   var rexPwd=/^\w{4,15}$/;
		   //正则匹配
		   var b1=rexName.test(f1)
		   var b2=rexPwd.test(f2)
	       
		   if(b1&&b2){
			   alert("注册成功，请登录")
		   }else{
			   if(userName.valu==""||userPwd.value==""){
			   				   alert("信息不能为空")
			   				   return false;
			   }
			   alert("格式不规范")
			   return false;
		   }


           location.href="登录.html"
			}
	
	</script>
	</body>
</html>